var vm=new Vue({
    el:"#products",
    data:{
        List:{},//分页数据集
        pageSize: 4,//每页显示多少条数据
        categoryList:[],//类别列表
        brandList:[],//品牌列表
        functionList:[],//功能列表
        products:{//查询条件
            productsList:"",
            productCategory:"",
            productBrand:"",
            productFunction:""
        },
        productDes:{},//产品详情
        standards:[],//产品规格
        goodsOrder:{}//产品订单
    },

    mounted(){
        this.selectPage();
    },

    mounted(){
        //初始化加载调用
        this.selectPage(1);
        this.selectCategory();
        this.selectBrand();
        this.selectFunction();
        this.getPageData();
    },
    //监听对象，当对象值发生变化触发多条件查询分页方法
    watch:{
        products:{
            handler(newValue, oldValue){
                console.log('我变化了',newValue,oldValue);
                this.selectCondition(1);
            },
            deep: true
        }
    },
    /*computed: {
        myProducts:function(){
            return JSON.parse(JSON.stringify(this.products))
        }
    },*/
    methods:{
        //查询所有并分页
        selectPage:function (pageNum){
            let that=this;
            axios.get("/products/selectPage.do",{
                params:{
                    pageNum:pageNum,
                    pageSize:this.pageSize
                }
            }).then(function (response){
                that.List=response.data;
            }).catch(function (error){
                console.log(error);
            })
        },
        //查询所有类别
        selectCategory:function (){
            let that=this;
            axios.get("/products/selectCategory.do").then(function (response){
                that.categoryList=response.data;
            })
        },
        //查询所有品牌
        selectBrand:function (){
            let that=this;
            axios.get("/products/selectBrand.do").then(function (response){
                that.brandList=response.data;
            })
        },
        //查询所有功能
        selectFunction:function (){
            let that=this;
            axios.get("/products/selectFunction.do").then(function (response){
                that.functionList=response.data;
            })
        },
        //产品多条件查询并分页
        selectCondition:function (pageNum){
            let that=this;
            axios.post("/products/selectCondition.do?pageNum="+pageNum+"&pageSize="+this.pageSize,this.products).then(function (response){
                console.log(response.data);
                that.List=response.data;
            })
        },
        //重置选择
        reset:function (){
            this.products={
                productsList:"",
                productCategory:"",
                productBrand:"",
                productFunction:""
            }
        },
        //根据指定索引查看产品详情信息
        findId:function (i) {
            this.productDes = this.List.list[i];
            localStorage.setItem('productDes',JSON.stringify(this.productDes));
        },
        //刷新页面或者从别的页面进入，提取this.productDes的值
        getPageData:function (){
            this.productDes=JSON.parse(localStorage.getItem('productDes'));
            if (this.productDes==null){
                this.productDes={};
            }
            this.standards=this.productDes.productStandards.split(",");
        },
        //保存购买商品的信息
        saveData:function (){
            this.goodsOrder.orderGoods=this.productDes.productName;//商品名
            this.goodsOrder.productPhoto=this.productDes.productPhoto;//商品图片
            this.goodsOrder.payment=this.productDes.productPrice;//商品单价
            localStorage.setItem('goodsOrder',JSON.stringify(this.goodsOrder));
        }
    }
})